<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>快递</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
      /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        -webkit-box-shadow: inset 0 0 5px transparent;
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(0,0,0,0.12);
        -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
      }


      .view {
        width: 100%;
        height: 100%;
        /* margin: 20px; */
        /* background-image: url("../components/IconSvg/pack.svg"); */
        /* background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center; */
        background-color: bisque;
        /* background-color: #fff; */
        position: relative;
      }

      .bg-img{
        width: 100%;
        height: 100%;
         background-image: url("../components/IconSvg/pack.svg");
        background-size: 75% 75%;
        background-repeat: no-repeat;
        background-position: center;

      }


      ul {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
        overflow-y: auto;
      }

      li{
        font-size: 14px;
        padding: 5px;
        display: flex;
        align-items: center;
      }

      li ~ li{
        border-top: 1px solid rgba(255, 255, 255, 0.5);
      }

      .delete-box{
        width: 0;
        height: 100%;
        overflow: hidden;
        font-size: 20px;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .info-box{
        width: 100%;
        transition: all 0.3s;
      }

      li:hover .info-box{
        width: calc(100% - 30px);
      }
      li:hover .delete-box{
        width: 30px;
      }

      li .odd {
        /* 超出省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;

      }

      li .info{
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
      }

      .details-view{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        /* background-color: rgba(255, 255, 255, 0.5); */
        background-color: bisque;
        padding: 10px;
        overflow-y: auto;
      }

      .details-title{
        text-align: center;
        font-weight: bolder;
        font-size: 20px;
      }

      .details-item{
        width: 100%;
        display: flex;
        align-items: center;
        margin: 15px 0;
      }

      .details-time{
        text-align: center;
        margin-right: 20px;
      }

      .details-content{
        text-align: left;
        word-break: break-all;
      }

      .out-box{
        position: fixed;
        right: 10px;
        bottom: 10px;
        font-size: 20px;
        padding: 5px;
        background-color: rgba(255, 228, 196, 0.5);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }

      .view:hover .refresh-btn{
        display: block;
      }

      .refresh-btn{
        display: none;
        position: fixed;
        right: 10px;
        bottom: 10px;
        font-size: 18px;
        cursor: pointer;
      }

      .load-view{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 20px;
        border-radius: 15px;
        
      }

      .load-view icon-svg{
        animation-name: alternate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      @keyframes alternate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

  
    </style>
  </head>
  <body>
    <div class="view">
      <div class="bg-img"></div>
      <ul>
      </ul>
      <div class="refresh-btn" title="更新">
        <icon-svg name="refresh"></icon-svg>
      </div>
      <div class="details-view">
        <div class="out-box">
          <icon-svg name="forward"></icon-svg>
        </div>
        <div class="details-box">
          <div class="details-item">
            <div class="details-time"></div>
            <div class="details-content"></div>
          </div>
        </div>
      </div>
      <div class="load-view">
        <icon-svg class="load-icon" name="load" color="#fff"></icon-svg>
      </div>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module" async>
    import { startKuaidi } from "./browser/kuaidi100.js";
    import { setInterval } from '../common/utils/utils.js'
    import IconSvg from "../components/IconSvg/IconSvg.js";
    customElements.define("icon-svg", IconSvg);
    let data = {
      list: [],
    };
    let list = [];
    let index = '';

    window.getData = () => data;

    if (window.ipcRenderer) {
      window.ipcRenderer.on('init', async (event, res) => {
        data = res || data;
        list = await getPackList();
        renderList()
      });
      window.ipcRenderer.on("toParent", async (event, res) => {
        let index = data.list.findIndex((item) => {
          return item.id === res.data.id
        });
        loadViewEl.style.display = 'flex';
        if(index >= 0){
          data.list[index] = res.data;
          try {
            let info = await startKuaidi(res.data.id, res.data.code);
            list[index] = {
              id: res.data.id,
              code: res.data.code,
              info
            }
          } catch (error) {
            loadViewEl.style.display = 'none';
          }
        }else{
          data.list.unshift(res.data);
          try {
            let info = await startKuaidi(res.data.id, res.data.code);
            list.unshift({
              id: res.data.id,
              code: res.data.code,
              info
            });
          } catch (error) {
            loadViewEl.style.display = 'none';
          }
        }

        loadViewEl.style.display = 'none';
        renderList()
        window.sendSaveData(data);
      });
    }

    // let info = await startKuaidi('YT7478285147086');
    // console.log(info);
    const imgEl = document.querySelector('.bg-img');
    const ul = document.querySelector('ul');
    const detailsBoxEl = document.querySelector('.details-box');
    const detailsViewEl = document.querySelector('.details-view');
    const outBoxEl = document.querySelector('.out-box');
    const refreshBtnEl = document.querySelector('.refresh-btn');
    const loadViewEl = document.querySelector('.load-view');
    const getPackList = async () => {
      if(!data.list.length)return [];
      loadViewEl.style.display = 'flex';
      let arr = [];
      try {
        for (let i = 0; i < data.list.length; i++) {
          let item = data.list[i];
          let res = await startKuaidi(item.id, item.code);
          arr.push({
              id: item.id,
              code: item.code,
              info: res
            });
        }
      } catch (error) {
        loadViewEl.style.display = 'none';
      }
      loadViewEl.style.display = 'none';
      return arr;
    };

    const renderCurrent = () => {
      detailsBoxEl.innerHTML = '';
      let titleEl = document.createElement('div');
      titleEl.className = 'details-title';
      titleEl.innerText = `${list[index].id}（${list[index].info ? list[index].info.title : '暂无信息'}）`;
      detailsBoxEl.appendChild(titleEl);
      if(!list[index].info)return;
      list[index].info.list.forEach(item=>{
        let detailsItemEl = document.createElement('div');
        detailsItemEl.className = 'details-item';
        let time = item.time.split(/\s/).join('')
        let str = `
          <div class="details-time">${time.slice(0, 10)}<br>${time.slice(10, 15)}<br>${time.slice(15)}</div>
          <div class="details-content">${item.info}</div>
        `
        detailsItemEl.innerHTML = str;
        detailsBoxEl.appendChild(detailsItemEl)
      })
    }


    const renderList = async () => {
      ul.innerHTML = '';
      if(!data.list.length){
        imgEl.style.opacity = 1
        return;
      }else{
        imgEl.style.opacity = '0.3'
      }
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        let li = document.createElement("li");
        let str = `
          <div class="info-box">
            <div class="odd">${item.id}（${item.info ? item.info.title : ''}）</div>
            <div class="info">
              <span>${item.info ? item.info.list[0].time : '暂无物流信息'}</span>
              <span>${item.info ? item.info.list[0].info : ''}</span>
            </div>
          </div>
          <div class="delete-box">
            <icon-svg name="closure"></icon-svg>
          </div>
        `
        li.innerHTML = str;

        li.querySelector('.info-box').onclick = window.triggerHandle(() => {
          index = i;
          detailsViewEl.style.display = 'block';
          renderCurrent()
        })

        li.querySelector('.delete-box').onclick = window.triggerHandle(() => {
          data.list.splice(i, 1);
          list.splice(i, 1);
          renderList();
          window.sendSaveData(data);
        })

        ul.appendChild(li);
      }
    }

    outBoxEl.onclick = window.triggerHandle(() => {
      detailsViewEl.style.display = 'none';
    })

    refreshBtnEl.onclick = window.triggerHandle(async () => {
      list = await getPackList();
      renderList();
    })

    setInterval(async()=>{
      list = await getPackList();
      renderList();
    }, 60 * 60 * 1000)
  </script>
</html>
